<?php
/**@var \Weline\Framework\View\Template $this */
/**@var \Weline\Backend\Block\ThemeConfig $themeConfig */
$themeConfig = \Weline\Framework\Manager\ObjectManager::getInstance(\Weline\Backend\Block\ThemeConfig::class);
?>
<!DOCTYPE html>
<!--
 *@Author       秋枫雁飞
 *@Email        aiweline@qq.com
 *@Forum        https://bbs.aiweline.com
 *@DESC         后台共用头部
-->
<html lang='en' <?= ('rtl' === $themeConfig->getThemeModel()) ? " dir=\"rtl\"" : '' ?>>
<head>
    @template(Weline_Admin::common/head.phtml)
    <!-- jquery.mCustomScrollbar 插件 -->
    <link href="@static(Weline_Admin::/libs/jquery.mCustomScrollbar/jquery.mCustomScrollbar.css)" rel="stylesheet"/>
    <!-- Responsive Table css -->
    <link href='@static(Weline_Admin::assets/libs/admin-resources/rwd-table/rwd-table.min.css)' rel='stylesheet' type='text/css'/>
    <link href='@static(Weline_Eav::css/attribute.css)' rel='stylesheet' type='text/css'/>
    <title><?= __('Aliyun动态域名解析') ?></title>
</head>

<body <?= $themeConfig->getLayouts() ?? ''; ?>>

<!--页头工具条 开始-->
@template(Weline_Admin::common/page/loading.phtml)
<!--页头工具条 结束-->

<!-- <body data-layout="horizontal" data-topbar="dark"> -->

<!-- 开始 页面 -->
<div id="layout-wrapper">


    <!--页头工具条 开始-->
    <w:block class='Weline\Admin\Block\Backend\Page\Topbar'/>
    <!--页头工具条 结束-->

    <!-- ========== Topnav Start ========== -->
    <!--页头菜单栏 开始-->
    <w:block class='Weline\Admin\Block\Backend\Page\Topnav'/>
    <!--页头菜单栏 结束-->

    <!-- ========== Left Sidebar Start ========== -->
    <!--左侧菜单栏 开始-->
    @template(Weline_Admin::common/left-sidebar.phtml)
    <!--左侧菜单栏 结束-->


    <!-- ============================================================== -->
    <!-- Start right Content here -->
    <!-- ============================================================== -->
    <div class="main-content">

        <div class='page-content'>
            <div class='container-fluid'>
                <!-- start page title -->
                <div class='row'>
                    <div class='col-12'>
                        <div class='page-title-box d-sm-flex align-items-center justify-content-between'>
                            <h4 class='mb-sm-0'>
                                <lang>阿里云>动态域名解析</lang>
                            </h4>

                            <div class='page-title-right'>
                                <ol class='breadcrumb m-0'>
                                    <li class='breadcrumb-item'><a href='javascript: void(0);'>
                                            <lang>阿里云</lang>
                                        </a></li>
                                    <li class='breadcrumb-item'>
                                        <a href="@backend-url('*/backend/ddnslist')">
                                            <lang>Ddns域名列表</lang>
                                        </a>
                                    </li>
                                </ol>
                            </div>

                        </div>
                    </div>
                </div>
                <!-- end page title -->
                <!-- start page message -->
                <div class='row'>
                    <template>Weline_Component::message.phtml</template>
                </div> <!-- end message -->
                <div class='row'>
                    <div class='col-12'>
                        <div class='card'>
                            <div class='card-body'>
                                <h4 class='card-title'>
                                    <lang>阿里云DDns动态域名解析管理</lang>
                                </h4>
                                <p class='card-title-desc'>
                                    <lang>通过本地获取公网IP并调用阿里云域名解析接口向阿里云解析服务器发送对应域名更新IP的请求。使得本地计算机（电脑）可作为服务器运行。</lang>
                                </p>
                                <p class='card-title-desc'>
                                    <lang>使用时请确保线上已存在解析的对应记录。例如：ipv4线上需要有对应主机的A记录ipv4解析，ipv6则也需要线上有对应主机AAAA记录的ipv6解析。</lang>
                                </p>
                                <p class='card-title-desc'>
                                    <lang>总之：此插件工具只能更新IP，无法新建域名解析，所以线上必须有对应记录的解析，这个插件才能更新线上Dns。</lang>
                                </p>
                                <div class='table-rep-plugin'>
                                    <!-- search form -->
                                    <div class='row'>
                                        <div class='col-6'>
                                            <block class='Weline\Component\Block\Form\Search' id='entity-search'
                                                   action='*/backend/ddnslist' method='get' keyword='search' value='name'
                                                   placeholder='请输入关键词'></block>
                                        </div>
                                        <div class='col-6'>
                                            <button class='btn btn-primary pull-right' type='button' data-bs-toggle='offcanvas'
                                                    data-bs-target='#offcanvasRightAdd' aria-controls='offcanvasRightAdd'>
                                                <lang>添加域名</lang>
                                            </button>
                                            <!-- offcanvasRightAdd -->
                                            <div class='offcanvas offcanvas-end w-75' tabindex='-1' id='offcanvasRightAdd'
                                                 aria-labelledby='offcanvasRightAddLabel'>
                                                <div class='offcanvas-header'>
                                                    <h5 id='offcanvasRightAddLabel'>
                                                        <lang>添加域名</lang>
                                                    </h5>
                                                    <button type='button' class='btn-close text-reset' data-bs-dismiss='offcanvas'
                                                            aria-label='@lang{关闭}'></button>
                                                </div>
                                                <div class='offcanvas-body w-100 h-100 overflow-hidden'>
                                                    <div class="position-relative w-100 h-100 ">
                                                        <!--写一个刷新iframe的按钮-->
                                                        <!--<div class='btn btn-group-justified sticky-top'>
                                                            <button class='btn btn-info pull-right' onclick='flushIframe()'>
                                                                <lang>刷新</lang>
                                                            </button>
                                                        </div>-->
                                                        <iframe id='attributeAddIframe' class='w-100 h-100'
                                                                data-src="@backend-url('*/backend/ddnslist/add')"
                                                                frameborder='0'></iframe>
                                                        <script>
                                                            function flushIframe() {
                                                                let iframe = $('#attributeAddIframe');
                                                                iframe.attr('src', iframe.attr('src'))
                                                            }
                                                        </script>
                                                    </div>
                                                </div>
                                            </div>
                                            <script>
                                                //show.bs.offcanvas
                                                let offcanvasRightAdd = $('#offcanvasRightAdd')
                                                offcanvasRightAdd.on('show.bs.offcanvas', function () {
                                                    let attributeAddIframe = $('#attributeAddIframe')
                                                    attributeAddIframe.attr('src',attributeAddIframe.attr('data-src'))
                                                })
                                            </script>
                                        </div>
                                    </div>
                                    <!-- end search form -->
                                    <div class='table-responsive mb-0' data-pattern='priority-columns'>
                                        <table id='tech-companies-1' class='table table-striped table-bordered'>
                                            <thead>
                                            <tr>
                                                <th data-priority='3'><lang>ID</lang></th>
                                                <th data-priority='1'><?= __('主机') ?></th>
                                                <th data-priority='1'><?= __('域名') ?></th>
                                                <th data-priority='1'><?= __('ipv4') ?></th>
                                                <th data-priority='1'><?= __('ipv6') ?></th>
                                                <th data-priority='1'><?= __('间隔') ?></th>
                                                <th data-priority='1'><?= __('启用ipv4解析') ?></th>
                                                <th data-priority='1'><?= __('启用ipv6解析') ?></th>
                                                <th data-priority='1'><?= __('启用') ?></th>
                                                <th data-priority='3'><?= __('创建时间') ?></th>
                                                <th data-priority='3'><?= __('更新时间') ?></th>
                                                <th data-priority='3'><?= __('操作') ?></th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <foreach name="items" item="item" key="key">
                                                <tr>
                                                    <td class='co-name'>{{item.ddns_domain_id}}</td>
                                                    <td class='co-name'>{{item.host_name}}</td>
                                                    <td class='co-name'>{{item.domain}}</td>
                                                    <td class='co-name'>{{item.ipv4}}</td>
                                                    <td class='co-name'>{{item.ipv6}}</td>
                                                    <td class='co-name'>{{item.interval}}</td>
                                                    <td class='co-name'>{{item.ipv4_flag}}</td>
                                                    <td class='co-name'>{{item.ipv6_flag}}</td>
                                                    <td class='co-name'>{{item.enable}}</td>
                                                    <td class='co-name'>{{item.create_time}}</td>
                                                    <td class='co-name'>{{item.update_time}}</td>
                                                    <td class='co-name'>
                                                        <div class="d-flex gap-2">
                                                            <a class="btn btn-danger" href="@backend-url('*/backend/ddnslist/delete')?id={{item.ddns_domain_id}}"><lang>删除</lang></a>
                                                            <a class="btn btn-info" href="@backend-url('*/backend/ddnslist/edit')?id={{item.ddns_domain_id}}"><lang>编辑</lang></a>
                                                        </div>
                                                    </td>
                                                </tr>
                                            </foreach>
                                            </tbody>
                                        </table>
                                        {{pagination}}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div> <!-- end col -->
                </div> <!-- end row -->
            </div> <!-- container-fluid -->
        </div>
        <!-- End Page-content -->
        <!-- offcanvasRightAdd -->
        <div class='offcanvas offcanvas-end w-75 modal-scrollbar-measure' tabindex='-1' id='offcanvasRight_edit'
             aria-labelledby='offcanvasRightLabel_edit'>
            <div class='offcanvas-header'>
                <h5 id='offcanvasRightLabel_edit'>
                    <lang>添加属性</lang>
                </h5>
                <button type='button' class='btn-close text-reset' data-bs-dismiss='offcanvas'
                        aria-label='@lang{关闭}'></button>
            </div>
            <div class='offcanvas-body overflow-hidden'>
                <!--写一个刷新iframe的按钮-->
                <div class='row'>
                    <div class='btn btn-group-justified sticky-top'>
                        <button class='btn btn-info pull-right' onclick='flushIframe_edit()'>
                            <lang>刷新</lang>
                        </button>
                    </div>
                </div>
                <iframe id='attributeIframe_edit' class='w-100 h-100'
                        data-src="@backend-url('*/backend/attribute/edit')"
                        frameborder='0'></iframe>
                <script>
                    function flushIframe_edit() {
                        let iframe = $('#attributeIframe_edit');
                        iframe.attr('src', iframe.attr('src'))
                    }
                </script>
            </div>
        </div>
        <script>
            $(function(){
                //show.bs.offcanvas
                let offcanvasRightAdd = $('#offcanvasRightAdd')
                offcanvasRightAdd.on('show.bs.offcanvas', function () {
                    let attributeAddIframe = $('#attributeAddIframe')
                    attributeAddIframe.attr('src', attributeAddIframe.attr('data-src'))
                })
            });
        </script>
        <footer class="footer">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-6">
                        <script>document.write(new Date().getFullYear())</script>
                        © Weline.
                    </div>
                    <div class="col-sm-6">
                        <div class="text-sm-end d-none d-sm-block">
                            Crafted with <i class="mdi mdi-heart text-danger"></i> By <a
                                    href="https://www.aiweline.com/">秋枫雁飞(aiweline)</a>
                        </div>
                    </div>
                </div>
            </div>
        </footer>

    </div>
    <!-- end main content-->

</div>
<!-- END layout-wrapper -->
<!--右边栏-->
@template(Weline_Admin::common/right-sidebar.phtml)

<!-- Table Editable plugin -->
<script src="@static(Weline_Admin::assets/libs/table-edits/build/table-edits.min.js)"></script>
<script src="@static(Weline_Admin::assets/js/pages/menus/table-editable.init.js)"></script>
<script src='@static(Weline_Admin::/libs/jquery.mCustomScrollbar/jquery.mCustomScrollbar.concat.min.js)'></script>
<!-- Responsive Table js -->
<script src='@static(Weline_Admin::assets/libs/admin-resources/rwd-table/rwd-table.min.js)'></script>

<!-- Init js -->
<script src='@static(Weline_Admin::assets/js/pages/table-responsive.init.js)'></script>
<!-- 配置项弹窗 -->
<div id='optionConfig' class='modal fade' tabindex='-1'
     aria-labelledby='#optionConfig'
     aria-hidden='true'>
    <div class='modal-dialog modal-xl'>
        <div class='modal-content'>
            <div class='modal-header'>
                <h5 class='modal-title' id='optionConfigLabel'>
                    <lang>属性配置项弹窗</lang>
                </h5>
                <button type='button' class='btn-close' data-bs-dismiss='modal'
                        aria-label='@lang{关闭}'></button>
            </div>
            <div class='modal-body'>
                <h5>配置属性的配置项</h5>
                <div>
                    <table>
                        <thread>
                            <th>代码</th>
                            <th>配置项</th>
                            <th>所属实体代码</th>
                            <th>创建时间</th>
                            <th>更新时间</th>
                            <th>操作</th>
                        </thread>

                        <tbody id="attributeOption">

                        </tbody>
                    </table>
                </div>
            </div>
            <div class='modal-footer'>
                <button type='button' class='btn btn-light waves-effect' data-bs-dismiss='modal'>
                    <lang>关闭</lang>
                </button>
                <button type='button' class='btn btn-primary waves-effect waves-light'>
                    <lang>保存更改</lang>
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<script>
    $('#optionConfig').on('show.bs.modal', function (event) {
        showLoading();
        // 触发的按钮
        let button = event.relatedTarget
        let attribute_code = button.getAttribute('data-code')
        let entity_code = button.getAttribute('data-entity_code')
        $.ajax({
            url: '@backend-url("*/backend/attribute/option/search")?entity_code={entity_code}&attribute_code={attribute_code}'.replace
            ('{entity_code}', entity_code).replace('{attribute_code}', attribute_code)
            , success: (res) => {
                let attributeOption = $('#attributeOption')
                attributeOption.empty()
                let options = res['option']
                if (options) {
                    for (let option in options) {
                        console.log()
                        attributeOption.append()
                    }
                }
                attributeOption.append('')
                console.log(res)
            }
        })
        hideLoading();
    })
</script>
<!-- 配置项弹窗 -->
@template(Weline_Admin::common/footer.phtml)
</body>
</html>
